import type { DialogProps } from "element-plus";
import type { VNodeChild } from "vue";
import { ElDialog } from "element-plus";
import { computed, defineComponent, ref } from "vue";
import { useLayoutStore } from "@/stores/layout";

/**
 * 重新定义对话框组件, 在 src/plugins/elementPlus.ts 中导出
 * 由于 Element Plus 的对话框组件默认配置下在某些场景下无法正常工作
 * 同时目前(element-plus-2.11.3)在全局配置中, 对于某些属性的不支持, 因此封装 el-dialog 替换原生组件
 * 参考: https://element-plus.org/zh-CN/component/config-provider#dialog-%E5%B1%9E%E6%80%A7
 */
export default defineComponent((props: Partial<DialogProps>, { attrs, slots }) => {
    /** 是否是移动端 */
    const isMobile = computed(() => useLayoutStore().device === "mobile");

    /** 是否全屏显示, 用于点击按钮切换 */
    const hasFullscreen = ref(!!attrs.fullscreen);

    /** 切换全屏显示 */
    const toggleFullscreen = (): void => {
        hasFullscreen.value = !hasFullscreen.value;
    };

    /** 模仿 close icon 样式 */
    const defineIconClass = "el-icon w-[24px]! h-[24px]! hover:bg-[rgba(0,0,0,0.06)] rounded";

    /** 头部内容 */
    const defineHeader = ({ titleId, titleClass }: any): VNodeChild => (
        <div class="flex-between">
            <span class={titleClass} id={titleId}>{attrs.title}</span>
            {!isMobile.value && (
                <button
                    class="el-dialog__headerbtn text-(--el-color-info) right-8!"
                    onClick={toggleFullscreen}
                >
                    {hasFullscreen.value
                        ? (
                                <i class={defineIconClass}>
                                    <span class="icon-[ic--baseline-fullscreen-exit]" />
                                </i>
                            )
                        : (
                                <i class={defineIconClass}>
                                    <span class="icon-[ic--baseline-fullscreen]" />
                                </i>
                            )}
                </button>
            )}
        </div>
    );

    return () => (
        <ElDialog
            appendToBody={props.appendToBody}
            draggable={props.draggable}
            destroyOnClose={props.destroyOnClose}
            fullscreen={hasFullscreen.value || isMobile.value || props.fullscreen} // 移动端强制全屏
            {...attrs}
        >
            {{
                header: ({ titleId, titleClass }: any) => slots.header ? slots.header() : defineHeader({ titleId, titleClass }),
                default: () => slots.default && slots.default(),
                footer: () => slots.footer && slots.footer(),
            }}
        </ElDialog>
    );
}, {
    name: "ElDialog",
    props: {
        appendToBody: {
            type: Boolean,
            default: true,
        },
        draggable: {
            type: Boolean,
            default: true,
        },
        destroyOnClose: {
            type: Boolean,
            default: true,
        },
        fullscreen: {
            type: Boolean,
            default: false,
        },
    },
});
